<style>
    .web_menu ul li {
        list-style: none;
        border-bottom: 1px solid #f4f4f4;
        height: 40px;
        line-height: 40px;
    }
    
    .web_menu ul {
        -webkit-margin-before: 1em;
        -webkit-margin-after: 1em;
        -webkit-margin-start: 0px;
        -webkit-margin-end: 0px;
        -webkit-padding-start: 20px;
    }
    
    .web_menu ul li:hover {
        background-color: #f5f5f5;
    }
</style>
<!-- Content Header (Page header) -->
<section class="content-header">
    <h1>
        分配权限
    </h1>

</section>

<section class="content">

    <div class="row">
        <div class="col-xs-12">
            <div class="box-tools">

            </div>
            <div class="box">

                <div class="box-header">
                    <h3 class="box-title">{$role.name} - 分配权限</h3>

                    <div class="box-tools">
                        <div class="input-group input-group-sm" style="width: 550px;">
                            <a href="javascript:;" class="btn label-info pull-right " style="width: 100px; margin-left: 10px" id="save_menu">保存权限</a>

                            <div class="input-group input-group-sm pull-right" style="width: 150px; margin-right: 10px">


                            </div>
                        </div>
                    </div>
                </div>
                <form action="{:url('save')}" id="save_menu_form">
                    <input type="hidden" name="role_id" id="role_id" value="{$role_id}">
                    <!-- /.box-header -->
                    {volist name="menu_tree" id="vo" }
                    <div class="col-md-3 web_menu">
                        <div class="box box-warning">
                            <div class="box-header with-border">
                                <h3 class="box-title">
                                    <input type="checkbox" class="select_all"> 全选
                                    <input type="checkbox" value="{$vo.id}" name="menu_ids[]" {:in_array($vo.id,$menu_ids)? 'checked="checked"': ''}> &nbsp; &nbsp; {$vo.title}</h3>

                                <div class="box-tools pull-right">
                                    <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                                </div>
                                <!-- /.box-tools -->
                            </div>
                            <!-- /.box-header -->

                            {if condition="array_key_exists('_child',$vo)"}
                            <div class="box-body">
                                <ul>
                                    {volist name="vo['_child']" id="sub"}
                                    <li>
                                        &nbsp; &nbsp; <input type="checkbox" value="{$sub.id}" name="menu_ids[]" {:in_array($sub.id,$menu_ids)? 'checked="checked"': ''}>&nbsp; &nbsp; <span>{$sub.title} </span>
                                    </li>
                                    <!--1111-->
                                    {if condition="array_key_exists('_child',$sub)"}
                                    <!--222-->
                                    {volist name="sub['_child']" id="sub1"}
                                    <li>
                                        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span><input type="checkbox" value="{$sub1.id}" name="menu_ids[]" {:in_array($sub1.id,$menu_ids)? 'checked="checked"': ''}>&nbsp; &nbsp; {$sub1.title}</span>
                                    </li>
                                    {if condition="array_key_exists('_child',$sub1)"}
                                    <!--333-->
                                    {volist name="sub1['_child']" id="sub2"}
                                    <li>
                                        &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="checkbox" value="{$sub2.id}" name="menu_ids[]" {:in_array($sub2.id,$menu_ids)? 'checked="checked"': ''}>&nbsp; &nbsp; <span>{$sub2.title}</span>
                                    </li>
                                    {/volist} {/if}
                                    <!--333-->
                                    {/volist}
                                    <!--222-->
                                    {/if}
                                    <!--1111-->
                                    {/volist}
                                </ul>
                            </div>
                            {/if}
                            <!-- /.box-body -->
                        </div>
                        <!-- /.box -->
                    </div>
                    {/volist}
                    <!-- /.box-body -->
                </form>
            </div>
            <!-- /.box -->
        </div>
    </div>

</section>
<script src="/public/admin/js/common.js"></script>
<script>
    $(".select_all").click(function() {
        var parent = $(this).parent().parent().parent();

        $(":checkbox", parent).prop("checked", $(this).prop("checked"));
    });
    $("#save_menu").click(function() {
        var len = $('input[type=checkbox]:checked', $("#save_menu_form")).length;
        if (len <= 0) {
            bootoast({
                message: "请选择",
                type: 'danger',
                position: 'right-top',
                timeout: 2
            });
            return false;
        }
        $.post("{:url('save')}", $("#save_menu_form").serialize(), function(data) {
            console.log(data);
            if (data.code == 1) {
                bootoast({
                    message: data.msg,
                    type: 'success',
                    position: 'right-top',
                    timeout: 2
                });
                setTimeout(function() {
                    window.location.reload();
                }, 1500);
            } else {
                bootoast({
                    message: data.msg,
                    type: 'danger',
                    position: 'right-top',
                    timeout: 2
                });
            }
        })

    });
</script>